<template>
  <div class="preson">
    <!-- <h2>姓名：{{ name }}</h2>
    <h2>年龄：{{ age }}</h2>
    <h2>年龄：{{ tel }}</h2> -->
    <h2>姓名：{{ obj.name }}</h2>
    <h2>年龄：{{ obj.age }}</h2>
    <h2>年龄：{{ obj.tel }}</h2>
    <button @click="changeName">修改名字</button>
    <button @click="changeAge">修改年龄</button>
    <button @click="showTel">查看联系方式</button>
  </div>
</template>

<!-- <script>
export default {
  name: 'PresonTest'
}
</script> -->

<script setup>
import { reactive } from 'vue'

defineOptions({
  name: 'PresonTest'
})

// let name = ref('张三')
// let age = ref(18)
// let tel = ref('1008666')
let obj = reactive({
  name: '张三',
  age: 18,
  tel: '1008666'
})

const changeName = () => {
  // name.value = '菜虚坤'
  console.log(obj)
  obj.name = '菜虚坤'
}
const changeAge = () => {
  // age.value = 81
  obj.age = 81
}
const showTel = () => {}
</script>

<style scoped lang="scss">
.preson {
  background-color: #438fe0;
  padding: 20px;

  button {
    margin: 0 5px;
  }
}
</style>
